<template>
	 <uni-nav-bar title="奖励明细" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	 <Process :state="'4'"></Process>
	 <view class="package title" style="padding: 30rpx;">
		<text>团惠包名称</text>
		<text>{{name}}</text>
	 </view>
	 <scroll-view
	   scroll-y="true"
	   enable-back-to-top
	   @scrolltolower="loadMore"
	   class="scroll-box"
	   :style="{ height: pageHeight + 'px' }"
	 >
	 <view class="package" style="padding: 0px 20rpx;margin-top: 0px;">
		 <view class="column reowList"  v-for="(item,index) in orderLists" :key='item.id'>
			<view class="space-between top_reowList"> 
			  <view class="center">
				  <text style="color: #666;font-size: 26rpx;">车友</text>
				  <image :src="item.avatar" mode=""></image>
				  <text>{{item.nickname}}</text>
			  </view>
			  <view>
				  <text>¥</text>
				  <text style="font-size:42rpx;margin-left: 5rpx;">{{item.money}}</text>
			  </view>
			</view>
			<view class="space-between bot_reowList"><text>{{item.createtime}}</text><text>{{item.memo}}</text></view>
		 </view>
	 </view>
	 <view class="column fillings" v-if="orderLists.length<1" :style="{ height: pageHeight + 'px' }">
	   <image :src="Empty"></image>
	   <text>暂无奖励明细</text>
	 </view>
	</scroll-view>
</template>

<script setup lang="ts">
	import { navBack,navTo } from '@/utils/navigator';
	import Process from '@c/groupBenefits/process.vue';
	import { toPublish } from '@mqtt';
	import {rewardList} from '@/gql/group';
	import { Empty } from '@/utils/Static';
	import { getDriverID } from '@/stores/driverID';
	import { onLoad } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	const user_id = getDriverID();
	const orderLists = ref([]);
	const isLoading = ref(false);
	const lastPage = ref(1);
	const currentPage = ref(1);
	const pageHeight = ref();
	const shopID=ref('')
	const name=ref('')
	onLoad((pearm)=>{
		shopID.value=pearm.id
		name.value=pearm.name
		uni.getSystemInfo({
		  success: function(res) {
		    pageHeight.value = (res.windowHeight - 300).toString();
		  },
		});
		init();
	})
	function init() {
	  isLoading.value = true;
	  const payload = {
	    query: rewardList,
	    variables: {
	      page: currentPage.value,
	      user_id,
		  bao_id:Number(shopID.value)
	    },
	  };
	  toPublish(
	    'ql/store/getTeambaoMoneyList',
	    payload,
	    (obj: any) => {
	      const { team_bao_money_list } = obj.data;
	      isLoading.value = false;
	      orderLists.value = [...orderLists.value, ...team_bao_money_list.list];
	      lastPage.value = team_bao_money_list.lastpage;
	    }
	  );
	}
	/**
	 * 加载更多
	 */
	function loadMore() {
	  if (currentPage.value < lastPage.value) {
	    currentPage.value++;
	    init();
	  }
	}
</script>

<style scoped lang="less">
	.title{
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		text:nth-of-type(1){
			font-size: 28rpx;
			font-weight: 400;
			margin-right: 20rpx;
		}
		text:nth-of-type(2){
			width: 75%;
		}
	}
	.reowList:nth-last-child(1){
		border-bottom: none;
	}
	.reowList{
		width: 100%;
		border-bottom: 1px solid #eee;
		padding: 20rpx 0px;
		box-sizing: border-box;
		.top_reowList{
			width: 100%;
			image{
				width: 54rpx;
				height: 54rpx;
				border-radius: 50%;
				margin:0px 15rpx;
			}
			text{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
			}
			view:nth-of-type(2){
				font-size: 22rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #F54B39;
			}
		}
		.bot_reowList{
			width: 100%;
			margin-top: 15rpx;
			text{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
			}
		}
	}
	.fillings {
		image {
			width: 350rpx;
			height: 300rpx;
		}
	
		text {
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #666;
			margin-top: 50rpx;
		}
	}
</style>